<template>
  <view class="tab-list">
    <view class="item" v-for="(item, index) in list" :key="index" @click="switchTab(item)">
      <view class="image">
        <u--image
          width="100%"
          :fade="true"
          duration="450"
          lazy-load
          mode="widthFix"
          :src="baseUrl + (selected === item.url ? item.activeIcon.path : item.icon.path)" />
      </view>
      <view class="text" :style="{color: selected === item.url ? selectedColor : color}">{{item.text}}</view>
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
import base64 from '@/util/base64'
import Home from '../../api/home'
import config from '../../config/config'
const homeModel = new Home()
export default {
  props: {
    selected: {
      type: String,
      default: '/pages/index/index'
    }
  },
  data() {
    return {
      baseUrl: config.baseUrl,
      color: '#333333',
      selectedColor: color.main_color,
      list: [
        // {
        //   "iconPath": "/static/tabbar/express.png",
        //   "selectedIconPath": "/static/tabbar/express-active.png",
        //   "pagePath": "pages/express/index",
        //   "text": "首页",
        //   url: '/pages/express/index',
        // },
        // {
        //   "iconPath": "/static/tabbar/shop.png",
        //   "selectedIconPath": "/static/tabbar/shop-active.png",
        //   "pagePath": "pages/index/index",
        //   "text": "商城",
        //   url: '/pages/index/index'
        // },
        // {
        //   "iconPath": "static/tabbar/express.png",
        //   "selectedIconPath": "static/tabbar/express-active.png",
        //   "pagePath": "pages/express/index",
        //   "text": "分类",
        //   url: '/pages/category/index',
        //   isPage: 1
        // },
        // {
        //   "iconPath": "static/tabbar/express.png",
        //   "selectedIconPath": "static/tabbar/express-active.png",
        //   "pagePath": "pages/express/index",
        //   "text": "购物车",
        //   url: '/pages/cart/index',
        //   isPage: 1
        // },
        // {
        //   "iconPath": "static/tabbar/my.png",
        //   "selectedIconPath": "static/tabbar/my-active.png",
        //   "pagePath": "pages/center/index",
        //   "text": "我的",
        //   url: '/pages/center/index'
        // }
      ]
    }
  },
  methods: {
    switchTab(item) {
      console.log(item.url)
      if (+item.isPage === 1) {
        uni.navigateTo({
          url: item.url
        })
      } else {
        uni.switchTab({
          url: item.url
        })
      }
    },
    /*
        1) page.json中, 默认页, 一定要用必须存在的页面, 如/pages/index/index
        2) 数据表中可以隐藏某些页面
        3) 数据表中可以排序
        4) 缓存根据url和text来转向到默认页
     */
    getTabbar() {
      // todo 可以定义在vux中
      // 但是uni中是有页面缓存的, 所以也不会一直查数据库的
      homeModel.getTabbar().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.list = data.list

        // console.log(data)

        // 自定义默认页
        const key = 'tabbar-0711'
        const cache = uni.getStorageSync(key)
        if (!cache || cache !== this.list[0].text + this.list[0].url) {
          console.log('redirect ... ')
          uni.setStorageSync(key, this.list[0].text + this.list[0].url)
          this.switchTab(this.list[0])
        }
      })
    }
  },
  created() {
    this.getTabbar()
  }
}
</script>

<style scoped lang="scss">
.tab-list {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
  border-top: 1rpx solid #f3f5f7;
  .item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .image {
      width: 42rpx;
      height: 42rpx;
      //background: red;
    }
    .text {
      font-size: 24rpx;
      margin-top: 10rpx;
      //background: black;
    }
  }
}
</style>
